<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>删除节点</title>
    <script type="text/javascript">
        function function1() {
            var df = document.createDocumentFragment(); // 创建文档碎片
            for (let i = 0; i < 5; i++) {
                var temp = document.createElement("div");
                temp.innerHTML = "div的文字"+(i+1);
                temp.setAttribute("style", "color:red;")

                df.appendChild(temp);
            }
            document.getElementById("con").appendChild(df);
        }

        function function2() {
            var df = document.createDocumentFragment();
            for (let i = 0; i < 5; i++) {
                var temp = document.createElement("img");
                temp.setAttribute("src", "./../asset/images/off.png")
                temp.setAttribute("width", "100px;")
                df.appendChild(temp);
            }

            document.getElementById("con").appendChild(df);
        }
        
        function function3() {
            var temp=document.querySelector("#con>div"); // 选择容器，默认选择第一个
            temp.parentNode.removeChild(temp);
        }
        function function4(){
            var images=document.querySelectorAll("#con>img"); // 寻找到所有图
            var temp=images[images.length-1];
            temp.parentNode.removeChild(temp);
        }
    </script>
</head>
<body>
<button onclick="function1()">添加5个文本</button>
<button onclick="function2()">添加5个图形</button>
<button onclick="function3()">删除第一个文本</button>
<button onclick="function4()">删除最后一个图片</button>
<div id="con"></div>
</body>
</html>